@import '../../common/scss/base.scss';
@import '../share/share.scss';
@import '../../common/scss/animation.scss';
page{
  background: $theme-color;
  box-sizing: border-box;
  position: relative;
  .icon-tag{
    width: 17rpx;
    height: 17rpx;
    background-color: red;
    position: absolute;
    top: 5rpx;
    border-radius: 50%;
    right: 25rpx;
    font-size: 12rpx;
    color: #ffffff;
    line-height: 7.8rpx;
    padding-top: 1rpx;
    box-sizing: border-box;
  }
  .height-bottom{
    height: 170rpx;
  }
  rich-text{
    image{
      width: 100%
    }
  }
  van-tag{
    width: 56rpx;
    line-height: 32rpx;
    border: 2rpx solid #ff7008;
    font-size: 24rpx;
    color: #ff7008;
    border-radius: 6rpx;
    letter-spacing: -1rpx;
    display: inline-block;
    text-align: center;
    vertical-align: 4rpx;
    margin-right: 10rpx;    
  }
  .select-skuNum{
    background-color: #ffffff;
    padding: 30rpx;
  }
}
.black {
  color: #000000;
  margin-left: 40rpx;
}
.rich-img{
  width: 100%;
}
// 轮播
.detail-slide{
  position: relative;
  width: 100%;
  height: 750rpx;
  background-color: #ffffff;
  .detail-swiper{
    height: 750rpx;
    swiper-item{
      display: flex;
      align-items: center;
    }
    image{
      width: 100%;
      height: 100%;
    }
  }
  .detail-dots{
    position: absolute;
    bottom: 20rpx;
    right: 14rpx;
    background-color: rgba(0,0,0,.4);
    color: #ffffff;
    border-radius: 30rpx;
    font-size: 22rpx;
    padding: 0 24rpx;
    line-height: 44rpx
  }
}
.show-make-money {
  position: relative;
  image {
    width: 690rpx;
    height: 90rpx;
    margin: 18rpx 30rpx 0;
  }
  .fan-xian {
    position: absolute;
    top: 40rpx;
    left: 126rpx;
    bottom: 0;
    margin: auto;
    text-align: center;
    view {
      display: inline-block;
      font-size: 28rpx;
      &:nth-child(2) {
        color: #EE1530;
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }
  .know {
    position: absolute;
    top: 36rpx;
    right: 64rpx;
    width: 40rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular;
    text-align: justify;
    color: #FED39D;
  }
}
// 商品
.goods-detail-info{
  background-color: #ffffff;
  padding:32rpx 0;
  .detail-info-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 30rpx;
    line-height:64rpx;
    .detail-good-share::after{
      border:none;
    }
    .detail-good-share{
      width: 164rpx;
      text-align: center;
      margin: 0;
      font-size: 20rpx;
      border: none;
      line-height: 55rpx;
      background: #d0021b;
      border-radius: 104rpx 0rpx 0rpx 104rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      image{
        width: 40rpx;
        height: 40rpx;
        font-size: 24rpx;
        vertical-align: middle;
      }
      view{
        margin-left: 6rpx;
        display: inline-block;
        text-align: center;
        font-size: 22rpx;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .detail-good-introduction{
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(136,136,136,1);
    line-height: 36rpx;
    margin: 16rpx 0;
    text-justify: distribute-all-lines;
    text-align: justify;
    padding: 0 30rpx;
  }
  .good-moneys{
    display:flex;
    align-items:center;
   .good-moneys-get {
      position: relative;
      width: 300rpx;
      height: 50rpx;
      view {
        position:absolute;
        background-color:#FFF6F7;
        font-size:26rpx;
        left:40rpx;
        color:#E60202;
        border-radius:9rpx;
        border: 2rpx solid #FBE1E1;
        height:36rpx;
        line-height:36rpx;
        padding:4rpx 12rpx;        
      }
    }
    .make-moneys {
      display:block;
      width:0;
      height:0;
      border-width:14rpx;
      border-style:solid;
      border-color: transparent #FBE1E1 transparent transparent;
      position:absolute;
      top: 11rpx;
      left: -28rpx;
      z-index:3;               
    }
    .make-moneys::after{
        content: '';
        display:block;
        width: 0;
        height:0;
        border-width: 20rpx;
        border-style:solid;
        border-color: transparent  #FFF6F7 transparent transparent;
        position:absolute;
        top: -20rpx;
        left: -18rpx;
    }
    text{
      display: inline-block;
    }
    .good-moneys-icon,.good-icons{
      font-size: 28rpx;
    }
    .good-icons{
      color: #B2B2B2;
      padding:0 16rpx 0 30rpx;
      position: relative;
      top: -2rpx;
    }
    .good-moneys-money{
      color:#EE1530;
    }
    .good-moneys-icon,.good-moneys-get{
      color:#D0021B;
    }
    .good-moneys-money{
      font-size: 54rpx;
      font-weight:500;
      font-family:SFProText-Medium;
    }
  }
  .detail-good-volume{
    display: flex;
    justify-content: space-between;
    font-size:24rpx;
    font-family:PingFangSC-Medium;
    color:#353535;
    line-height:36rpx;
    font-weight: 400;
    padding:16rpx 20rpx 0 30rpx;
    .good-price-del{
      text-decoration: line-through;
    }
  }
}
 .detail-good-title{
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding:0 30rpx;
    .detail-good-bt{
      width: 100%;
      font-size: 32rpx;
      color: #000000;
      font-family:PingFangSC-Medium;
      font-weight:500;
      display: flex;
      align-items: flex-start;
      // margin-top: 10rpx;
      margin-top: 18rpx;
			.goods-name {
        font-size:32rpx;
        display:inline-block;
        color:#353535;
        width:690rpx;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
			}
		}
		.black {
      color: #000000;
      margin-left: 40rpx;
		}
}
// 规格
.detail-select-spe{
  width: 100%;
  height: 88rpx;
  background-color: #ffffff;
  margin: 20rpx 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
  box-sizing: border-box;
  .detail-text-select{
    font-size:26rpx;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:#b2b2b2;
    display:flex;
    align-items:center;
    .free-one {
      margin-left:32rpx;
    }
    .detail-img-serve{
      width: 28rpx;
      height: 28rpx;
      margin-right:12rpx;
    }
    .detail-all-free{
      display: flex;
      align-items: center;
			margin: 0;
			font-size: 24rpx;
			color: #888888;
      font-weight: bold;
      
      view{
        display: flex;
        align-items: center;
        .van-icon-passed {
          font-size: 28rpx;
          margin-right: 12rpx;
          display:block;
          color: #FF7008;
        }
      }
    }
  }
  .van-icon-arrow {
    font-size: 25rpx;
    color: #C7C7CC;
    font-weight: 900;
  }
}
.hover-style{
  background-color: rgba(0,0,0,.2);
}
// 详情
.goods-detail-all{
  width: 100%;
  text-align: center;
  .goods-detail-show{
    font-size:34rpx;
    font-family:PingFangSC-Regular;
    color:#000000;
    font-weight: 600;
    padding: 20rpx 0;
  }
  .goods-detail-rich-text{
    font-size: 0;
  }
  .show-more{
    width: 100%;
  }
}

.back-shadow{
  position: fixed;
  bottom:0;
  width:750rpx;
  height:100%;
  background:rgba(0, 0, 0, 0.3);
  .shopping-select{
    background-color: #ffffff;
    width: 750rpx;
    height: 400rpx;
    position: fixed;
    bottom: 0;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
  }
}
.ass-pay-btn{
  width:100%;
  line-height:96rpx;
  background:linear-gradient(160deg,rgba(249,107,107,1) 0%,rgba(220,28,28,1) 100%);
  text-align: center;
  color: #ffffff;
  font-size: 32rpx;
  position: fixed;
  bottom: 0;
  border: none;
  border-radius: 0;
}
// 购买
.detail-pay{
  height: 96rpx;
  box-sizing:border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content:space-between;
  background-color:#ffffff;
  position: fixed;
  bottom: 0;
  border-top: 1rpx solid rgba(0,0,0,0.2);
  box-sizing: border-box;
  .is-home-button{
    display: flex;
    align-items: center;
  }
  .detail-button{
    border:none;
    background-color:#ffffff;
    line-height:28rpx;
    padding:0!important;

  }
  .detail-button::after,.ass-pay-btn{
    border: none;
  }
  .detail-to-other{
    font-size:20rpx;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(136,136,136,1);
    text-align: center;
    width:104rpx;
    padding: 10rpx 0 6rpx;
    image{
      width: 56rpx;
      height: 56rpx;
    }
  }
  .detail-good-odd{
    width: 200rpx;
    background-color: #ffffff;
    border-left: 2rpx solid rgba(216,216,216,1);
    font-size: 28rpx;
    color: RGBA(53, 53, 53, 1);
    text-align: center;
  }
  // 暂无库存商品
  .no-good-odd{
    width: 200rpx;
    color: #888888;
    border-left: 2rpx solid rgba(216,216,216,1);
    font-size: 28rpx;
    text-align: center;
  }
  // 无商品
  .no-good-buy{
    width:236rpx;
    height:100%;
    background-color:#888888;
    color:#ffffff;
    text-align:center;
    font-family:PingFangSC-Regular;
    font-weight:400;
    padding:24rpx 0;
    box-sizing:border-box;
    font-size:28rpx;
  }
  // 有商品
  .detail-good-buy{
    width:236rpx;
    height:100%;
    background-color:#d0021b;
    color:#ffffff;
    text-align:center;
    font-family:PingFangSC-Regular;
    font-weight:400;
    padding:12rpx 0;
    box-sizing:border-box;
    view:nth-child(2){
      font-size:28rpx;
    }
    view:nth-child(1){
      letter-spacing:1.52rpx;
      font-size:20rpx;
    }
  }
}
van-popup{
  position: relative;
  .close-spe{
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    padding:4rpx;
    color: #D9D9D9;
  }
  van-transition{
    view{
      background-color: rgba(0, 0, 0, 0.54)!important;
    }
  }
  .detail-spe-select{
    // margin-bottom: 64rpx;
    margin-bottom: 32rpx;
    image{
      width:290rpx;
      height:290rpx;
      border-radius:8rpx;
    }
    .spe-show-price{
      display:inline-block;
      margin-left: 26rpx;
      line-height:44rpx;
      font-family:PingFangSC-Regular;
      font-weight:400;
      text{
        font-size:32rpx;
        color:rgba(208,2,27,1);
        margin-bottom: 26rpx;
      }
      .goods-in-stock{
        font-size:24rpx;
        color:rgba(136,136,136,1);
      }
      .select-color{
        font-size:24rpx;
        color:#353535;
        width:350rpx;
        height:36rpx;
        overflow-x:scroll;
      }
    }
  }
  scroll-view{
    max-height: 400rpx;
    .goods-spe{
      border-bottom: 2rpx solid rgb(247, 247, 247);
      // margin-bottom: 32rpx;
      font-family:PingFangSC-Regular;
      font-weight:400;
      text{
        font-size:28rpx;
        color:rgb(53,53,53);
        line-height:48rpx;
      }
      .spe-select-list{
        margin: 30rpx 0 32rpx;
        view{
          display: inline-block;
          border-radius: 12rpx;
          font-size:24rpx;
          color:rgb(53,53,53);
          line-height:36rpx;
          background-color: rgb(243, 243, 243);
          box-sizing: border-box;
          padding: 20rpx;
          margin-right: 30rpx;
          margin-bottom:16rpx;
          border: 1rpx solid rgb(243, 243, 243);
        }
        .addColor{
          color: #ffffff;
          background-color:  #D0021B;
        }
      }
    }
  }
  .good-select-num{
    display:flex;
    justify-content:space-between;
    margin-top:32rpx;
    text{
      font-size:28rpx;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgb(53,53,53);
      line-height:48rpx;
    }
    view{
      display:flex;
      align-items:center;
      image{
        width:56rpx;
        height:56rpx;
        background:rgb(243,243,243);
        border-radius:2rpx;
      }
      input{
        display: inline-block;
        width: 56rpx;
        height: 56rpx;
        background:rgb(235,234,234);
        border-radius:2rpx;
        font-size:28rpx;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:#000000;
        line-height:40rpx;
        text-align: center;
        margin: 0 2rpx;
      }
    }
  }
  .van-popup{
    border-top-left-radius:20rpx;
    border-top-right-radius:20rpx;
    box-sizing:border-box;
		max-height:95%;
    .sure-button{
      width:690rpx;
      height:96rpx;
      text-align: center;
      background:rgba(208,2,27,1);
      border-radius:8rpx;
      font-size:36rpx;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:#ffffff;
      line-height:96rpx;
      letter-spacing:2rpx;
      margin-top: 80rpx;
    }
    .no-stock{
      width:690rpx;
      height:96rpx;
      text-align: center;
      background:#888888;
      border-radius:8rpx;
      font-size:36rpx;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:#ffffff;
      line-height:96rpx;
      letter-spacing:2rpx;
      margin-top: 80rpx;
    }
  }
  .serve-pop{
    background-color: #ffffff;
    .serve-title{
      font-size: 32rpx;
      color: #000000;
      font-family:PingFangSC-Semibold;
      font-weight:600;
      line-height:48rpx;
      text-align: center;
      padding:68rpx 0;
    }
    .serve-cont{
      padding:0 40rpx;
      margin-bottom:100rpx;
      .serve-cont-list{
        margin-bottom:42rpx;
        .van-icon-passed{
          font-size: 28rpx;
          vertical-align: top;
          margin-top: 6rpx;
          margin-right:30rpx;
          display: inline-block;
        }
        image{
          width: 28rpx;
          height: 28rpx;
          vertical-align: top;
          margin-top: 6rpx;
          margin-right:30rpx;
        }
        .serve-cont-list-text{
          display:inline-block;
          width:612rpx;
          view{
            font-size:26rpx;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(136,136,136,1);
            line-height:36rpx;
            letter-spacing: 1rpx;
            &:first-child{
              font-size:30rpx;
              color:#000000;
              line-height:42rpx;
              margin-bottom: 20rpx;
            }
          }
          .serve-city{
            margin-top: 40rpx;
          }
        }
      }
    }
    .serve-sure{
      line-height: 98rpx;
      background-color: #D0021B;
      color: #ffffff;
      text-align: center;
    }
    .sure-servex{
      margin-bottom: 68rpx;
    }
  }
  // 多拿商城说明
  .show-zhuan{
    background-color: #ffffff;
    width: 560rpx;
    margin: 0 94rpx 30% 96rpx;
    border-radius: 30rpx;
    padding: 0 40rpx 36rpx;
    box-sizing:border-box;
    .zhuan-title{
      color: #000000;
      font-size: 36rpx;
      line-height: 118rpx;
      text-align: center;
      border-bottom: 1rpx solid #E5E5E5;
    }
    .zhuan-content{
      width: 480rpx;
      margin-top: 42rpx;
      font-size: 30rpx;
      color: #888888;
      height: 548rpx;
      view{
        &:first-child{
          margin-bottom: 50rpx;
        }
      }
    }
    .zhuan-btn{
      width: 346rpx;
      color:#ffffff;
      line-height: 84rpx;
      text-align: center;
      border-radius: 50rpx;
      font-size: 32rpx;
      background-color: #D0021B;
      margin: 0 68rpx 0rpx 66rpx;
    }
  }
}
// 折叠
.price-express{
  .price-express-title{
    height: 60rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .title-explain{
      margin-right: 14rpx;
    }
    view{
      font-size: 24rpx;
      color: #353535;
    }
  }
  .price-express-content{
    height: 530rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    .price-expres{
      font-size: 32rpx;
      color: #000000;
      font-weight: 600;
      padding: 40rpx 0 34rpx;
    }
    .express-text-span{
      font-size: 26rpx;
      margin-bottom:46rpx;
      text{
        &:nth-child(2){
          color: #888888;
        }
      }
    }
    .express-text{
      margin-bottom:40rpx;
      view{
        display: inline-block;
        font-size: 26rpx;
        color: #888888;
      }
      .express-text-title{
        color: #000000;
      }
    }
  }
}